<template>
<div class="tag">
  <span>
    <button :class="{active : isActive}" class="button" @click="tagClick">
      {{tag.name}}
    </button>
    <button :class="{active : isActive}" class="remove" @click="removeClick">
      <img src="~assets/img/home/remove.png" alt="">
    </button>
  </span>
</div>
</template>

<script>
export default {
  props: {
    tag: {
      type: Object,
      default: () => {}
    },
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    tagClick() {
      let fullpath = this.tag.path.substr(6)
      let activeNavPath = fullpath.substr(0,fullpath.indexOf('/'))
      let activeTagPath = fullpath.substr(fullpath.indexOf('/')+1)
      let activeNav = this.$store.state.modules.navigation.navigation.find(nav => nav.path == activeNavPath)
      if(this.tag.path == '/home') {
        this.$store.commit('updActiveNav',{name:"首页",path:"home",content:[]})
        this.$store.commit('updActiveTag',{name:this.tag.name,path:'home',fullPath:this.tag.path})
      }else {
        this.$store.commit('updActiveNav',activeNav)
        this.$store.commit('updActiveTag',{name:this.tag.name,path:activeTagPath,fullPath:this.tag.path})
      }
      this.$store.commit('clickTags',{name: this.tag.name,path: this.tag.path})
      if(this.$route.path != this.tag.path) {
        this.$router.push(this.tag.path)
      }
    },
    removeClick() {
      if(this.tag.path != '/home') {
        this.$store.commit('clickTags',{name: "首页",path: '/home'})
        this.$store.commit('removeTags',this.tag)
        this.$router.push('/home')
      }
    }
  },
}
</script>

<style scoped>
.tag{
  float: left;
}
.button{
  font-size: 100%;
  font-family:"NSimSun";
  border-radius: 0px;
  background-color: var(--color-background);
  border: 0.01em solid rgb(207, 215, 229);
  outline: none;
  padding: 10px 10px 10px 15px;
  border-right: none;
}
.button:hover{
  color: var(--color-high-text);
}

.remove{
  font-size: 100%;
  font-family:"NSimSun";
  border-radius: 0px;
  background-color: var(--color-background);
  border: 0.01em solid rgb(207, 215, 229);
  outline: none;
  padding: 10px 10px 10px 0px;
  border-left: none;
}
.remove img{
  width: 10px;
  height: 10px;
}
.active{
  background-color: white;
  border-bottom: none;
}
</style>
